<template>
    <div class="title_container">
        <div class="rect_1 rect"></div>
        <div class="rect_2 rect"></div>
        <div class="rect_3 rect"></div>
        <div class="rect_4 rect"></div>
        <div class="title_txt">
            <div class="left" style="display: flex; align-items: center">
                <IconSvg name="xiaodian" height="10px" width="10px"></IconSvg>
                <span style="margin-left: 10px">{{title}}</span>

            </div>
        </div>
    </div>
</template>

<script>
    export default {
      name: 'Title',
      props: {
        title: {
          type: String,
          default: ''
        }
      },
      data() {
        return{}
      }
    }
</script>

<style lang="scss">
    .title_container {
        height: 39px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        position: relative;
        .rect {
            height: 3px;
            width: 4px;
            background-color: #2E89F8;
            position: absolute;
            &.rect_1 {
                  top: 0px;
                  left: 0;
              }
            &.rect_2 {
                top: 0px;
                right: 0;
            }
            &.rect_3 {
                bottom: 0px;
                left: 0;
                height: 3px;
            }
            &.rect_4 {
                bottom: 0px;
                right: 0;
                height: 3px;
            }
        }
        .title_txt {
            display: flex;
            font-size: 16px;
            align-items: center;
            color: #333;
            box-sizing: border-box;
            border-bottom: 1px solid #2E89F8;
            border-top:1px solid #2E89F8;
            height: calc(100% - 2px);
            width: 100%;
            justify-content: space-between;
            .right {
                font-size: 14px;
                color: #2E89F8;
            }
        }
    }
</style>
